<template>
   <!-- 弹窗组件 -->
   <div class="dialog-box">
      <el-dialog
         v-model="dialogVisible"
         title="新增角色"
         width="500"
         @close="handleClose"
      >
         <el-form
            :model="form"
            ref="formRef"
            label-width="200px"
            :rules="rules"
         >
            <!-- <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item
                     label="上级角色"
                     prop="parent_id"
                  >
                     <el-radio-group
                        v-model="form.parent_id"
                        placeholder="请选择"
                     >
                        <el-radio
                           label="添加顶级角色"
                           value="0"
                        />
                        <el-radio
                           v-if="currentNodeId !== '0'"
                           label="添加下级角色"
                           :value="currentNodeId"
                        />
                     </el-radio-group>
                  </el-form-item>
               </el-col>
            </el-row> -->
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item
                     label="角色名称"
                     prop="name"
                  >
                     <el-input v-model="form.name" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item
                     label="权限标识"
                     prop="auth_codes"
                  >
                     <el-input v-model="form.auth_codes" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item
                     label="备注"
                     prop="note"
                  >
                     <el-input v-model="form.note" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item
                     label="排序"
                     prop="show_sort"
                  >
                     <el-input v-model="form.show_sort" />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="handleClose">取消</el-button>
               <el-button
                  color="#6860ff"
                  @click="handleSubmit"
               >
                  确定
               </el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
   import { ref, reactive } from "vue";
   import { ElMessage, type FormInstance, type FormRules } from "element-plus";
   import api from "@/api/index.js";
   const dialogVisible = ref(false);
   const currentNodeId = ref<string>("0");
   const formRef = ref<FormInstance>();
   const emit = defineEmits(["getRoleList"]);
   interface Form {
      parent_id: string;
      name: string;
      auth_codes: string;
      note: string;
      show_sort: string;
   }
   const form = ref<Form>({
      parent_id: "",
      name: "",
      auth_codes: "",
      note: "",
      show_sort: "",
   });
   // 表单校验规则
   const rules = reactive<FormRules>({
      parent_id: [{ required: true, message: "请选择上级角色", trigger: "change" }],
      name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
      auth_codes: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
      note: [{ required: true, message: "请输入备注", trigger: "blur" }],
      show_sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
   });
   const openLoading = async (id: number) => {
      form.value = {
         parent_id: "",
         name: "",
         auth_codes: "",
         note: "",
         show_sort: "",
      } as unknown as Form;
      dialogVisible.value = true;
      currentNodeId.value = id.toString();
   };
   // 添加角色
   const addRole = async () => {
      const res = await api.authority.addRole({ ...form.value, parent_id: currentNodeId.value });
      if (res.code === 200) {
         ElMessage.success("角色添加成功");
         dialogVisible.value = false;

         emit("getRoleList");
      } else {
         ElMessage.error("角色添加失败");
      }
   };
   // 确定
   const handleSubmit = async () => {
      if (!formRef.value) return;
      await formRef.value.validate(async (valid) => {
         if (valid) {
            await addRole();
            dialogVisible.value = false;
            emit("getRoleList");
         } else {
            ElMessage.error("请填写完整的表单信息");
         }
      });
   };
   // 取消
   const handleClose = () => {
      dialogVisible.value = false;
      formRef.value?.resetFields();
   };

   defineExpose({
      openLoading,
   });
</script>

<style lang="scss" scoped>
   ::v-deep .el-dialog {
      --el-dialog-padding-primary: 0px;
   }
   ::v-deep .el-dialog__header {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
   }
   ::v-deep .dialog-footer {
      padding: 10px 16px;
      border-top: 1px solid #f0f0f0;
   }
   ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #000;
   }
   ::v-deep .el-dialog__body {
      padding: 10px 30px;
   }
   :deep(.el-form-item__label) {
      justify-content: flex-start;
   }
   :deep(.el-form-item) {
      flex-direction: column;
      margin-bottom: 7px;
   }
   :deep(.el-select__wrapper) {
      background: #fafcfb;
   }
   :deep(.el-badge__content.is-fixed) {
      color: #666;
      border-radius: 3px;
      padding: 4px;
   }
   :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
      width: 100%;
   }
   :deep(.el-button:hover) {
      color: #6860ff;
      background: #f4f5f7;
   }
   :deep(.el-input__wrapper.is-focus) {
      box-shadow: 0 0 0 1px #6860ff;
   }
   :deep(.el-select__wrapper.is-focused) {
      box-shadow: 0 0 0 1px #6860ff !important;
   }
   .supply-products {
      margin-top: 20px;
      .title {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 16px;
         font-weight: bold;
         .title-text {
            display: flex;
            align-items: center;
            .line {
               height: 17px;
               width: 2px;
               border-radius: 12px;
               margin-right: 8px;
               background-color: #6860ff;
            }
         }
      }
   }
   .image-list {
      display: flex;
      gap: 8px;
      .el-image {
         width: 40px;
         height: 40px;
         border-radius: 4px;
      }
   }
</style>
